<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yann 的数字脉冲 | 博客</title>
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&family=Noto+Sans+SC:wght@300;400;700&display=swap" rel="stylesheet">

    <style>
        /* --- 变量定义 --- */
        :root {
            --bg-color: #0a0a0a;
            --primary-color: #00f7ff;
            --secondary-color: #9747FF;
            --text-color: #e0e0e0;
            --subtle-text-color: #a0a0a0;
            --glass-bg: rgba(16, 16, 16, 0.6);
            --border-color: rgba(0, 247, 255, 0.2);
            --glow-color: rgba(0, 247, 255, 0.5);
        }

        /* --- 全局重置与基础样式 --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: 'Noto Sans SC', sans-serif;
            overflow-x: hidden;
            position: relative;
        }

        /* --- 动态背景 --- */
        .dynamic-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }

        .dynamic-bg span {
            position: absolute;
            background-color: var(--primary-color);
            width: 2px;
            height: 2px;
            border-radius: 50%;
            animation: move 15s linear infinite;
        }

        @keyframes move {
            0% { transform: translateY(100vh) scale(0); }
            100% { transform: translateY(-10vh) scale(1); opacity: 0; }
        }

        /* --- 容器与布局 --- */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        /* --- 导航栏 --- */
        header {
            padding: 2rem 0;
            position: fixed;
            width: 100%;
            z-index: 10;
            background: linear-gradient(to bottom, var(--bg-color) 0%, rgba(10,10,10,0) 100%);
        }
        
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-family: 'Fira Code', monospace;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-color);
            text-decoration: none;
            text-shadow: 0 0 10px var(--glow-color);
        }

        .nav-links a {
            color: var(--text-color);
            text-decoration: none;
            margin-left: 2rem;
            font-weight: 400;
            transition: color 0.3s, text-shadow 0.3s;
        }

        .nav-links a:hover {
            color: var(--primary-color);
            text-shadow: 0 0 5px var(--glow-color);
        }

        /* --- 英雄区域 (Hero) --- */
        .hero {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .hero-title {
            font-family: 'Fira Code', monospace;
            font-size: 3.5rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 1rem;
            text-shadow: 0 0 15px var(--glow-color);
            white-space: nowrap;
            overflow: hidden;
            border-right: 3px solid var(--primary-color);
            animation: typing 3s steps(30, end), blink-caret .75s step-end infinite;
        }
        
        /* 打字机动画 */
        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }
        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: var(--primary-color); }
        }

        .hero-subtitle {
            font-size: 1.2rem;
            color: var(--subtle-text-color);
            max-width: 600px;
        }

        /* --- 主内容区域 --- */
        main {
            padding: 6rem 0;
            /* 玻璃拟态效果 */
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
        }

        .section-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 4rem;
            font-weight: 700;
            color: var(--primary-color);
            text-shadow: 0 0 10px var(--glow-color);
        }

        /* --- 文章网格 --- */
        .posts-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .post-card {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border-color);
            border-radius: 1rem;
            padding: 2rem;
            transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
            cursor: pointer;
        }

        .post-card:hover {
            transform: translateY(-10px);
            border-color: var(--primary-color);
            box-shadow: 0 0 20px var(--glow-color);
        }

        .post-card h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: var(--text-color);
        }

        .post-card p {
            font-size: 1rem;
            color: var(--subtle-text-color);
            line-height: 1.6;
            margin-bottom: 1.5rem;
        }
        
        .post-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.875rem;
            color: var(--subtle-text-color);
            font-family: 'Fira Code', monospace;
        }

        .post-tag {
            background: var(--primary-color);
            color: var(--bg-color);
            padding: 0.25rem 0.75rem;
            border-radius: 99px;
            font-weight: 700;
        }
        
        /* 特色文章 (跨列) */
        .featured-post {
            grid-column: span 2; /* 在大屏幕上占据两列 */
        }
        
        @media (max-width: 768px) {
            .featured-post {
                grid-column: span 1;
            }
            .hero-title {
                font-size: 2.5rem;
            }
        }

        /* --- 页脚 --- */
        footer {
            text-align: center;
            padding: 4rem 2rem;
            color: var(--subtle-text-color);
        }
        
        footer a {
            color: var(--primary-color);
            text-decoration: none;
        }
    </style>
</head>
<body>

    <div class="dynamic-bg" id="dynamic-bg"></div>

    <header>
        <div class="container">
            <nav>
                <a href="#" class="logo">&lt;Yann /&gt;</a>
                <div class="nav-links">
                    <a href="#posts">文章</a>
                    <a href="#">分类</a>
                    <a href="#">关于我</a>
                </div>
            </nav>
        </div>
    </header>

    <section class="hero">
        <h1 class="hero-title" id="hero-title">Connecting Worlds with Code</h1>
        <p class="hero-subtitle">
            你好，我是 Yann。一名热衷于探索技术边界的开发工程师。<br>
            欢迎来到我的数字脉冲，在这里分享知识、记录灵感。
        </p>
    </section>

    <main id="posts">
        <div class="container">
            <h2 class="section-title">-- 最新脉冲 --</h2>
            <div class="posts-grid">
                <article class="post-card featured-post">
                    <h3>Nuxt 3 混合部署：SSG 与 SPA 的完美结合</h3>
                    <p>探讨如何在一个 Nuxt 项目中，为公共博客页面启用静态生成以获得极致性能，同时为后台管理端配置为单页应用以实现复杂交互。这是现代 Web 应用的最佳实践。</p>
                    <div class="post-meta">
                        <span>2025-10-22</span>
                        <span class="post-tag">Nuxt</span>
                    </div>
                </article>

                <article class="post-card">
                    <h3>深入理解 CSS @font-face 规则</h3>
                    <p>从零开始，学习如何正确引入和使用自定义字体，并探讨 font-display 等性能优化策略，让你的网站字体既美观又高效。</p>
                    <div class="post-meta">
                        <span>2025-10-20</span>
                        <span class="post-tag">CSS</span>
                    </div>
                </article>

                <article class="post-card">
                    <h3>Spring Boot 异步任务与 Webhook</h3>
                    <p>如何在 Spring Boot 中通过 @Async 注解实现异步任务，并结合 Webhook (构建钩子) 实现静态博客的自动化部署，提升开发效率。</p>
                    <div class="post-meta">
                        <span>2025-10-18</span>
                        <span class="post-tag">Java</span>
                    </div>
                </article>
                
                 <article class="post-card">
                    <h3>我的三花猫：五年之约</h3>
                    <p>生活随笔。关于我如何与我的猫相遇，以及我们共同度过的五年时光里的点点滴滴。技术之外，也有温柔与陪伴。</p>
                    <div class="post-meta">
                        <span>2025-10-12</span>
                        <span class="post-tag">生活</span>
                    </div>
                </article>
            </div>
        </div>
    </main>

    <footer>
        <p>&copy; <span id="year"></span> <a href="#">Yann 的数字脉冲</a>. All Rights Reserved.</p>
    </footer>

    <script>
        // 动态背景生成
        const bgContainer = document.getElementById('dynamic-bg');
        const numberOfParticles = 100;

        for (let i = 0; i < numberOfParticles; i++) {
            const particle = document.createElement('span');
            particle.style.left = `${Math.random() * 100}%`;
            particle.style.animationDuration = `${5 + Math.random() * 10}s`;
            particle.style.animationDelay = `${Math.random() * 5}s`;
            particle.style.transformOrigin = `center ${Math.random() * 100}vh`;
            bgContainer.appendChild(particle);
        }
        
        // 动态更新年份
        document.getElementById('year').textContent = new Date().getFullYear();
        
        // 动态更换英雄区标题 (打字机效果)
        const titles = ["Connecting Worlds with Code", "探索技术的无限可能", "Yann 的数字脉冲"];
        let titleIndex = 0;
        const heroTitle = document.getElementById('hero-title');

        setInterval(() => {
            titleIndex = (titleIndex + 1) % titles.length;
            heroTitle.style.animation = 'none';
            heroTitle.offsetHeight; /* 触发重绘 */
            heroTitle.style.animation = '';
            heroTitle.textContent = titles[titleIndex];
        }, 6000); // 每6秒更换一次

    </script>
</body>
</html>